{% extends 'surveillanceapp/base.html' %}
{% load static %}
{% load widget_tweaks %}

{% block extracss %}
    <style>
        .container-fluid {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
            }
        label{
            font-size: 120%;
        }
        button {
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
            color:white;
            }

        button:hover {
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            color:white;
            }
        .btn{
            padding-top: 2% !important;
            padding-bottom: 2% !important;
        }
        .btn-text{
            font-size: 150%;
            font-weight: bold;
        }
    </style>
{% endblock %}


{% block main-content %}

    <div class="row">
        <div class="col-lg-12">
            <ol class="breadcrumb">
              <li><i class="fa fa-home"></i><a href="{% url 'surveillanceapp:index' %}">Home</a></li>
                <li><i class="fa fa-laptop"></i><a href="{% url 'surveillanceapp:stationlist' %}">Stations</a></li>
              <li><i class="fa fa-location-arrow"></i>Add New Station</li>
            </ol>
          </div>
    </div>
    <div class="container-fluid">
        <div class="row">

        <!--add new station form starts here -->
            <div class="col-lg-4">
                <form class="form-horizontal" method="POST" enctype="multipart/form-data">
                    {% csrf_token %}  <!--cross site request forgery -->

                        <div class="form-group">
                            <span class="text-danger small">{{ form.station_name.errors }}</span>
                            <label class="control-label col-sm-6">{{ form.station_name.label_tag }}</label>
                            <input class="form-control" name="station_name" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                            <span class="text-danger small">{{ form.lat_pos.errors }}</span>
                            <label class="control-label col-sm-6">{{ form.lat_pos.label_tag }}</label>
                            <input class="form-control" id="lat_pos" name="lat_pos" placeholder="Drag the marker">
                        </div>
                        <div class="form-group">
                            <span class="text-danger small">{{ form.lon_pos.errors }}</span>
                            <label class="control-label col-sm-6">{{ form.lon_pos.label_tag }}</label>
                            <input class="form-control" name="lon_pos" id="lon_pos" placeholder="Drag the marker">
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-6">{{ form.station_pic.label_tag }}</label>
                            <img src="" class="profilepicture" width="100%">
                            {% render_field form.station_pic class="form-control" %}
                        </div>
                        <div class="form-group">
                                <button type="submit" class="btn btn-success">
                                    <span class="fas fa-check-circle fa-2x" style="margin-right: 5%"></span>
                                    <span class="btn-text"> Submit</span>
                                </button>
                        </div>
                </form>

            </div>
            <!--form ends here -->

            <!-- station map starts here -->
            <div class="col-lg-6">
                <div class="panel panel-default">
                    <div class="panel-heading">Select Station Location</div>
                    <div class="panel-body">
                        <div id="station-map" style="width:auto;height:500px;">

                        </div>
                    </div>
                </div>
            </div>
            <!-- station map ends here-->

        </div>

    </div>



{% endblock %}

{% block extrajs %}
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBAUsak2E8DcVtc3hUtrg06-pPHER8LXdk&callback=initMap">
    </script>
    <script src="{% static 'js/imagePreviewer.js' %}"></script>
    <script>
        function initMap(){
            var loc = {lat: 27.7172, lng: 85.3240};
            //set map properties
            var myOptions={
                zoom:15,
                center:loc,
                panControl:true,
                zoomControl:true,
                scaleControl:true
            };

            //render map
            var map = new google.maps.Map(document.getElementById('station-map'), myOptions);

            var marker=new google.maps.Marker({
                map:map,
                position:loc,
                draggable:true
            });

            marker.addListener('dragend',function(){
                //get the current position where the pointer was dropped
                var point=marker.getPosition();

                //center the map at given point
                map.panTo(point);

                console.log(point.lat()+''+point.lng());  //print the pointer location in console
                document.getElementById('lat_pos').setAttribute("value",point.lat());
                document.getElementById('lon_pos').setAttribute("value",point.lng());
            });
        }
    </script>


{% endblock %}